<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>排序</title>
    <#include "/pubHeadStyle.html">
    <link rel="stylesheet" href="${ctx}/css/form.css">
</head>
<body>
<form action="" class="layui-form" id="sortLength">
    <div id="sortField"></div>
    <script type="text/html" id="sort">
        <select class="layui-yonyou-select  sortSelect" name="sort" lay-filter="sort">
            <option value=""></option>
            <option value="ASC">升序</option>
            <option value="DESC">降序</option>
        </select>
    </script>
    <script type="text/html" id="rowOperation">
        <a class="layui-btn layui-btn-xs" lay-event="moveup">上移</a>
        <a class="layui-btn layui-btn-xs" lay-event="movedown">下移</a>
    </script>
</form>
<script>
    layui.config({
        base: serverPath.formPath + staticPath.formPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index', 'element', 'form', 'layer', 'table', 'formTransfer', 'jquery', 'util','setter'], function () {
        var form = layui.form, layer = layui.layer, laydate = layui.laydate, upload = layui.upload,
            table = layui.table, setter = layui.setter,
            transfer = layui.formTransfer
        var tableId = '${tableId}';
        form.render();
        var $ = layui.$,active = {
            getCheckData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }};

        var tabConfig = {'limit':[100],'height':500};
        //表格配置文件
        var cols = [{type: 'checkbox'},
            {field: 'fieldName', title: '列名',align:"center"},
            {field: 'fieldDesc', title: '注释',align:"center"},
            {field: 'fieldType', title: '类型',align:"center"},
        ];
        var newLeftArr = [];
        var newRightArr = [];
        if("[]" === parent.sortField || undefined === parent.sortField){
            var leftArr = parent.fieldArr;
            for (var i = 0; i < leftArr.length; i++) {
                var json = {};
                json.fieldName = leftArr[i].fieldName;
                json.fieldDesc = leftArr[i].fieldDesc;
                json.fieldType = leftArr[i].fieldType;
                // json.sort = "DESC";
                newLeftArr.push(json);
            }
            if(parent.isOutTable == 0){ //内部表
                newLeftArr.push({"fieldName":"createtime","fieldDesc":"创建时间","fieldType":"date"})
            }
        }else{
            var rightArr = JSON.parse(parent.sortField);
            for (var i = 0; i < rightArr.length; i++) {
                var json = {};
                json.fieldName = rightArr[i].name;
                json.fieldDesc = rightArr[i].desc;
                json.fieldType = rightArr[i].fieldType;
                json.sort = rightArr[i].sort;
                newRightArr.push(json);
            }
            var leftArr = parent.fieldArr;
            if(parent.isOutTable == 0) { //内部表
                leftArr.push({"fieldName": "createtime", "fieldDesc": "创建时间", "fieldType": "date"});
            }
            for (var i = 0; i < leftArr.length; i++) {
                for (var j = 0; j < newRightArr.length; j++) {
                    if (leftArr[i].fieldName == newRightArr[j].fieldName) {
                        break;
                    }
                    if (leftArr[i].fieldName != newRightArr[j].fieldName && j == newRightArr.length - 1) {
                        newLeftArr.push(leftArr[i]);
                    }
                }
            }
        }
        transfer.render({
            elem: "#sortField", //指定元素
            cols: cols, //表格列  左侧  支持layui数据表格所有配置
            colls: [{type: 'checkbox',"lay-event":"getCheckData"},
                {field: 'fieldName', title: '列名',align:"center",templet: function (d) {
                        return '<span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: inline-block;width: 100%;">'+d.fieldName+'</span>';
                    }},
                {field: 'fieldDesc', title: '注释',align:"center",templet: function (d) {
                        return '<span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: inline-block;width: 100%;">'+d.fieldDesc+'</span>';
                    }},
                {field: 'fieldType', title: '类型', hide: true,align:"center"},
                {field: 'sort', title: '排序', templet: '#sort',align:"center",width:205},
                {
                    field: '', title: '管理', width: 150, templet: "#rowOperation",align:'center'
                }], //表格列 右侧 支持layui数据表格所有配置
            data: [newLeftArr, newRightArr],//[左表数据,右表数据[非必填]]
            tabConfig:tabConfig
        });

        $(".sortSelect").each(function (i, item) {
            $(item).val(newRightArr[i].sort);
            form.render('select');
        });

        table.on('tool(test)', function (obj) {
            switch (obj.event) {
                case 'moveup':
                    var tr = $(this).parent().parent().parent();
                    $(tr).insertBefore($(tr).prev());
                    break;
                case 'movedown':
                    var tr = $(this).parent().parent().parent();
                    $(tr).insertAfter($(tr).next());
                    break;
            }
        });

        $(document).on('click', '.btn', function () {
            $(".sortSelect").each(function (i, item) {
                for (var j = 0; j < newRightArr.length; j++) {
                    var field = newRightArr[j].fieldName;
                    var fieldText = $(item).parents("td").prev().prev().prev().children().text();
                    if (fieldText == field) {
                        $(item).val(newRightArr[j].sort);
                    }
                }
            });
            form.render('select');
        })
    })
</script>
</body>
</html>